<!-- 第五步/查看详情- 跟投分配方案弹窗-->
<template>
    <div class="">
        <el-table :data="distributionDetailList" border
                  :span-method="objectSpanMethod" highlight-current-row
                  :summary-method="getSummaries"
                  show-summary
        >
            <el-table-column type="index" prop="type" label="序号" width="50" align="center"></el-table-column>
            <el-table-column label="跟投额度" prop="investMoney" align="center"></el-table-column>
            <el-table-column label="占比(业务线)" prop="businessProportion" align="center">
                <template slot-scope="scope">{{scope.row.businessProportion}}%</template>
            </el-table-column>
            <el-table-column label="业务线" prop="businessName" align="center"></el-table-column>
            <el-table-column label="比例(部门)" prop="rankProportion" align="center">
                <template slot-scope="scope">
                    {{scope.row.departmentProportion?(scope.row.departmentProportion+"%"):'-'}}
                </template>
            </el-table-column>
            <el-table-column label="部门" prop="departmentName" align="center">
                <template slot-scope="scope">
                    {{scope.row.departmentName?scope.row.departmentName:'-'}}
                </template>
            </el-table-column>
            <el-table-column label="职级" prop="rankName" align="center">
                <template slot-scope="scope">
                    {{scope.row.rankName?scope.row.rankName:'-'}}
                </template>
            </el-table-column>
            <el-table-column label="比例(职级)" prop="rankProportion" align="center">
                <template slot-scope="scope">{{scope.row.rankProportion}}%</template>
            </el-table-column>
            <el-table-column label="绝对值(职级)" prop="rankMagnitude" align="center">
                <template slot-scope="scope">{{scope.row.rankMagnitude}}%</template>
            </el-table-column>
            <el-table-column label="姓名" prop="userName" align="center">
                <template slot-scope="scope">{{scope.row.userName?scope.row.userName:'-'}}</template>
            </el-table-column>
            <el-table-column label="比例" prop="userProportion" align="center">
                <template slot-scope="scope">{{scope.row.userProportion?(scope.row.userProportion + "%"):'-'}}
                </template>
            </el-table-column>
            <el-table-column label="绝对值" prop="absoluteNum" align="center">
                <template slot-scope="scope">{{scope.row.absoluteNum?(scope.row.absoluteNum + "%"):'-'}}</template>
            </el-table-column>
            <el-table-column label="跟投额度" prop="userInvestMoney" align="center">
                <template slot-scope="scope">{{scope.row.userInvestMoney | formatMoney}}</template>
            </el-table-column>
            <el-table-column label="回报金额" prop="returnMoney" align="center">
                <template slot-scope="scope">{{scope.row.returnMoney | formatMoney}}</template>
            </el-table-column>
            <el-table-column label="回报率" prop="rateOfReturn" align="center">
                <template slot-scope="scope">{{scope.row.rateOfReturn}}%</template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script>
    import utils from '@/common/utils'

    export default {
        components: {},
        data() {
            return {
                distributionDetailList: [],
                spanArr: [],//二维数组，用于存放单元格合并规则
                position: 0,//用于存储相同项的开始index
            }
        },
        watch: {
            tableData() {
                if (this.tableData && this.tableData.length) {
                    this.getinfodata()
                }
            }
        },
        methods: {
            //表格单元格合并
            objectSpanMethod({row, column, rowIndex, columnIndex}) {
                for (let i = 1; i < 9; i++) {
                    if (columnIndex === i) {
                        const _row = this.spanArr[i][rowIndex];
                        const _col = _row > 0 ? 1 : 0;
                        // console.log('第'+rowIndex+'行','第'+i+'列','rowspan:'+_row,'colspan:'+_col)
                        return {
                            rowspan: _row,
                            colspan: _col
                        }
                    }
                }
            },

            getSummaries(param) {
                let userInvestMoney = 0;
                let returnMoney = 0;
                let rateOfReturn = 0;
                param.data.forEach((item) => {
                    userInvestMoney += +item.userInvestMoney;
                    returnMoney += item.returnMoney;
                    rateOfReturn += item.rateOfReturn;
                });
                rateOfReturn = rateOfReturn/ param.data.length

                return ["合计", , "100%", , , , , , '100%', , , , userInvestMoney.toFixed(2), returnMoney.toFixed(2) , rateOfReturn.toFixed(2) + '%'];
            },
            compare(prop) {
                return function (a, b) {
                    let value1 = a[prop]
                    let value2 = b[prop]
                    return value1 - value2
                }
            },
            getinfodata() {
                this.distributionDetailList = JSON.parse(JSON.stringify(this.tableData));
                for (let j in  this.distributionDetailList) {
                    let orderNum = this.distributionDetailList[j]['departmentId'] + '' + this.distributionDetailList[j]['businessId']
                    this.$set(this.distributionDetailList[j], 'order', orderNum)
                }
                this.distributionDetailList.sort(this.compare('order'))
                this.rowspan(1, 'investMoney')
                this.rowspan(2, 'businessId')
                this.rowspan(3, 'businessId')
                this.rowspan(4, 'order')
                this.rowspan(5, 'order')
                this.rowspan(6, 'rankId')
                this.rowspan(7, 'rankId')
                this.rowspan(8, 'rankId')
            },


            rowspan(idx, prop) {
                this.spanArr[idx] = [];
                this.position = 0;
                let len = 0;
                this.distributionDetailList.forEach((item, index) => {
                    if (index === 0) {
                        this.spanArr[idx].push(1);
                        this.position = 0;
                    } else {
                        if (this.distributionDetailList[index][prop] === this.distributionDetailList[index - 1][prop]) {
                            this.spanArr[idx][this.position] += 1;//有相同项
                            this.spanArr[idx].push(0); // 名称相同后往数组里面加一项0
                        } else {
                            this.spanArr[idx].push(1);//同列的前后两行单元格不相同
                            this.position = index;
                        }
                    }
                })
            },


        },
        created() {
            //this.getinfodata()
        },
        props: ['tableData'],
        destroyed() {

        },
        filters: {
            formatMoney(money) {
                return utils.formatMoney(money)
            }
        }
    }

</script>

<style lang="stylus" scoped>


</style>
